<template>
  <div class="musicBox">
    <div class="center">
      <input type="text" v-model="text" placeholder="请输入内容">
      <input type="button" value="搜索" @click="search">
    </div>
    <v-history></v-history>
    <v-searchBox></v-searchBox>
    <div class="openBox" v-show="$store.state.searchShow">
        <img :src="imgPath" ref="headimg" id="headimg" :class="!$store.state.play?'headimg pause':'headimg'">
        <div class="controls" @click="movePlay">
          <i :class="!$store.state.play?'star':'stop'"></i>
        </div>
        <h4>{{name}}</h4>
        <h4>{{auther}}</h4>
        <div class="txt" ref="lyric">
          <div ref="txt" id="txtbox">
            <p v-for="(item, index) in $store.state.lyric" :class="onshow(item,index)" :index="index">
              {{item.txt | time}}
            </p>
          </div>
        </div>
        <audio id="v1" ref="v1" :src="mp3Url" @timeupdate="handleTimeUpdate"></audio>
        <div class="myControl">
          <span class="nowTime">{{nowTime}}</span>
          <span class="audioplayer-bar" @click="changePos($event)">
              <div class="audioplayer-bar-loaded" ref="loaded"></div>
              <div class="audioplayer-bar-played" ref="played" :style="{width:playedPercent+'%'}"></div>
          </span>
          <span class="allTime">{{allTime}}</span>
          <span class="volumeTxt">音量</span>
          <span class="volume" @click="changeVolume($event)">
            <div class="volume-bar" ref="volumeBar"></div>
            <div class="volume-on" :style="{width:volume+'px'}"></div>
            <div class="volume-btn" ref="volumeBtn"></div>
          </span>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import searchBox from '../searchBox/searchBox.vue'
import history from '../history/history.vue'

export default {
  data(){
    return{
      name:'',
      auther:'',
      imgPath:'',
      mp3Url:'',
      ss:0,
      allTime:'00:00',
      nowTime:'00:00',
      play:false,
      playedPercent:1,
      volume:0,
      lyricIndex:0
    }
  },
  methods:{
    handleTimeUpdate:function (){
      var audio = this.$refs.v1;
      var _this = this;
      if(_this.$store.state.play==false){
        audio.pause();
        return;
      }
      _this.ss = parseInt(audio.currentTime);
      _this.getAll();
      _this.getNow();
     _this.playedPercent = (audio.currentTime/audio.duration*100).toFixed(2);
     if(document.getElementsByClassName("show").length>0){
        var nowtxt = document.getElementsByClassName("show")[0];
        this.lyricIndex=nowtxt.getAttribute("index");
        if(this.lyricIndex==0||this.lyricIndex==1){
          this.$refs.txt.style.marginTop="0px";
        }else{
          this.$refs.txt.style.marginTop=(parseInt(-this.lyricIndex)*31+61)+'px';
        }
      }
    },
    getMessage:function (){
      var _this=this;
      /*****获取信息*******/
      axios({
        method:"get",
        url:"http://music.163.com/api/song/detail",
        params:{
          id:this.$route.params.id,
          ids:'['+this.$route.params.id+']'
        }
      })
      .then(function(response){
          _this.name=response.data.songs[0].name;
          _this.auther=response.data.songs[0].artists[0].name;
          _this.imgPath=response.data.songs[0].album.picUrl;
          _this.mp3Url=response.data.songs[0].mp3Url
      });
      /*****获取歌词*******/
      this.$store.dispatch('findlyric',this.$route.params.id);
    },
    search:function (){
      this.$store.state.searchShow=false;
      this.$refs.headimg.className='headimg pause'
      this.$refs.v1.pause();
      this.$refs.v1.currentTime=0.0;
      this.$store.dispatch('getplay',false);
      this.$refs.txt.style.marginTop='-31px';

      console.log(this.$refs.txt.style.marginTop+"===="+this.$refs.v1.currentTime);
      var _this=this;
      if(_this.text===''){
        this.$toast({message: '请输入内容',
                     position: 'middle',
                     duration: 800})
        return;
      }
      this.$store.commit('addsearchmusic',_this.text);
      this.$store.dispatch("findmusic",this.text);
    },
    movePlay:function (){
        if(this.$store.state.play==true){
            this.$refs.v1.pause();
        }else{
            this.$refs.v1.play();
        }
        this.$store.dispatch('getplay',!this.$store.state.play);
    },
    onshow:function (item,index){
        if(index+1>this.$store.state.lyric.length){
            return 'show'
        }else{
           if(item.time<=this.ss&&this.ss<this.$store.state.lyric[index+1].time){
             return 'show'
           }else{
             return '';
           }
        }
    },
    changePos:function (ev){
      var ev=ev||event;
      var audio = this.$refs.v1;
       var numb=(ev.offsetX/this.$refs.loaded.offsetWidth*100).toFixed(2);
       this.playedPercent=numb;
       var time = (audio.duration*numb/100)
       audio.currentTime=time;
       console.log(numb+'%====='+time);
    },
    changeVolume:function (ev){
      var ev=ev||event;
      this.volume=ev.offsetX;
      this.$refs.volumeBtn.style.left=(ev.offsetX-4)+'px';
      this.$refs.v1.volume=this.volume/this.$refs.volumeBar.clientWidth;
    },
    getAll:function (){
      var audio =this.$refs.v1;
      var minutes = Math.floor(audio.duration/60);
        if(minutes<10){
          minutes = '0'+minutes;
        }
        var seconds = parseInt(((audio.duration/60)%1).toFixed(2)*60)
        this.allTime = minutes+":"+seconds;
    },
    getNow:function (){
      var audio =this.$refs.v1;
      var minutes=parseInt(audio.currentTime/60);
      if(minutes<10){
        minutes = '0'+minutes;
      }
      var seconds=parseInt(audio.currentTime%60);
      if(seconds<10){
        seconds = '0'+seconds;
      }
      this.nowTime=minutes+":"+seconds;
    }
  },
  computed:{

  },
  components:{
    'v-searchBox':searchBox,
    'v-history':history
  },
  filters: {
      time:function (value){
        var txt=value.replace(new RegExp(/(\.\d{2,3})/g), '');
        return txt;
      },
      onclass:function (value){
        return show;
      }
  },
  mounted(){
    console.log(localStorage.music);
    this.volume=this.$refs.volumeBar.offsetWidth;
    this.getMessage();
  },
  watch:{
    $route(to,from){
        this.getMessage();
    },
    deep:true
  }
}
</script>

<style lang="Sass">
@mixin animation ($sizing) {
    -webkit-animation:$sizing;
       -moz-animation:$sizing;
            animation:$sizing;
}
@mixin animation-timing-function($sizing){
    -webkit-animation-timing-function:$sizing;
       -moz-animation-timing-function:$sizing;
            animation-timing-function:$sizing;
}
  .musicBox{ width: 100%; min-height: 100%; height: auto;
    .center{ width: 100%; height: 1.5rem;

      input[type=text]{width: 80%;height: .8rem; border-radius: .2rem; border:1px solid #3276b1; outline: 0; padding-left: .5rem;}
      input[type=button]{width: 10%;height: .8rem; border-radius: .2rem;  outline: 0; background: #26a2ff; border:none; color: #fff; }
      input[type=button]:active{color: red;}
    }
    .openBox{ width: 100%; text-align: center;

      .headimg{width: 128px; height: 128px; border-radius: 50%; margin-top: 20px; animation:mymove 30s infinite; animation-timing-function:linear;}
      .controls{ width: 50px; height: 40px; background: #2c3e50; margin: 0 auto; padding-top: 10px; border-radius: 50%;

        .star{display: block; width: 0; height: 0; border-top: 15px solid transparent; border-left: 20px solid #fff; border-bottom: 15px solid transparent; margin-left: 18px; }
        .stop{ display: block; width: 30px; height: 30px; background: #fff; margin-left: 10px;}
      }
      h4{ font-size: 19px; font-weight: normal; margin-top: 10px;}
      .txt{font-size: 14px; width: 90%; height: 150px; overflow: hidden; margin: 0 auto; margin-top: 20px; box-sizing:border-box;

        #txtbox{width: 100%; overflow: auto; }
        p{width: 100%; text-align: left; margin-top: 10px; font-size: 16px; color: #ccc;}
        .show{font-size: 18px; color: blue;}
      }
      .myControl{ width: 95%; margin: 10px auto; height: 30px; background: #333; display: flex;

        span{display: inline-block; font-size: 14px; color: #fff; line-height: 30px;}
        .nowTime{flex:0 0 10%; margin-left: 5%; }
        .audioplayer-bar{flex:0 0 55%; position: relative; cursor: pointer;

          .audioplayer-bar-loaded{ position: absolute; left: 0; top: 5px; width: 100%; height: 20px; background: #fff;  z-index: 1;}
          .audioplayer-bar-played{position: absolute; left: 0; top: 5px; z-index: 2; height: 20px; background: #ccc;}
        }
        .allTime{flex:0 0 10%; }
        .volumeTxt{flex:0 0 8%;}
        .volume{flex:0 0 10%; position: relative;

          .volume-bar{ position: absolute;left: 0; top: 13px; height: 6px; width: 100%; background: #fff; z-index: 1;}
          .volume-on{ position: absolute;left: 0; top: 13px; height: 6px; width: 100%;  background: #ccc; z-index: 2;}
          .volume-btn{position: absolute;left: 95%; top: 5px; width: 8px; height: 20px; background: #ccc; z-index: 3;}
        }
      }
    }
    #v1{margin-top: 40px; margin-bottom: 10px;}
  }
  .pause{
          animation-play-state:paused !important;
  -webkit-animation-play-state:paused !important;
  }
@keyframes mymove
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
</style>